<template>
	<view class="container">

		<view class="tui-form">
			<view class="logo">
				<image src="/static/images/common/logo.png" class="logos" mode="widthFix"></image>
			</view>
			<view class="tui-btn-box" v-if="hasauto==true">
				<button class="autophone" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
					授权手机号
				</button>
			</view>
			<view class="tui-btn-box" v-else>
				<button class="autologin" lang="zh_CN" @click="getUserInfo"
					withCredentials="true" open-type="getUserInfo">同意隐私协议并获取头像昵称信息</button>
				<button class="autologin yui_cancal" @click="cancelogin">取消登录</button>
			</view>
		

			<view class="tui-cell-text">
				<view class="tui-radio">
					<radio-group @change="change" style="transform:scale(0.9)" color="#ee401d" class="yui-radio-span">
					    <radio color="#ee401d" value="1"></radio>
					</radio-group>
				</view>
				阅读并同意<text class="tui-radio-notice" @tap="treaty">{{privacyContractName}}</text>
			</view>
		</view>
		   <!-- #ifdef MP-WEIXIN -->
		   <!-- 小程序隐私协议 -->
		   <privacy-popup></privacy-popup>
		   <!-- #endif -->
	
	</view>
</template>

<script>
	import PrivacyPopup from "@/components/xw-privacy-popup/privacy-popup.vue"
	 // import uniPopup from '@/components/uni-popup.vue';  
	export default {
		data() {
			return {
				hasauto: false,
				shareCode: "",
				code: '',
				checked:false,
				disableds: false,
				user_cipher: '',
				phoneiv: '',
				userencryptedData: '',
				encryptedData: '',
				phoneencryptedData: '',
				userInfo: {},
				mobile_encrypted_data: '',
				iv: '',
				 showPrivacy: false, // 弹框  
				        privacyContractName: '《服务协议和隐私条款》',  
				        resolvePrivacyAuthorization: '',  
			};
		},
		components: {
			PrivacyPopup
		},
		onLoad: function(options) {
			
			if (options) {
				let _this = this;
				if (options.shareCode) {
					_this.tui.setUserRefereeData(options.shareCode);
				}
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						_this.code = loginRes.code;
						let wxdata = _this.tui.getWxAuto();
						let wxphone = _this.tui.getWxAutophone();
						if (wxdata) {
							_this.hasauto = true;
							_this.user_cipher = {
								iv: wxdata.iv,
								encryptedData: wxdata.encryptedData
							};
							_this.iv = wxdata.iv;
							_this.encryptedData = wxdata.encryptedData;
							if (wxphone) {
								_this.phone_cipher = {
									iv: wxphone.iv,
									encryptedData: wxphone.encryptedData
								};
								_this.autologin();
								_this.mobile_encrypted_data = wxphone.encryptedData
								_this.phoneiv = wxphone.iv;
							}
						}
					},
					fail: (err) => {
						// console.log('login fail:', err);
					}
				});
			}
		},
		
		methods: {  
			getUserInfo: function(e) {
				let _this = this;
				let wxdata = _this.tui.getWxAuto();
				if (wxdata) {
					_this.hasauto = true;
				}
				// 新版本授权信息
				uni.getUserProfile({
					desc: '获取你的昵称、头像、地区及性别',
					success: (infoRes) => {
						_this.userInfo = infoRes.userInfo;
						_this.tui.setWxAuto(infoRes);
						_this.iv = infoRes.iv;
						_this.encryptedData = infoRes.encryptedData;
						_this.user_cipher = {
							iv: infoRes.iv,
							encryptedData: infoRes.encryptedData
						};
						_this.hasauto = true;
					},
					fail: (res) => {
						console.log(res)
					}
				});

			},
			change(){
				this.checked=true;
			}, 
			getPhoneNumber: function(e) {
				if(this.checked==false){
					this.tui.toast('请阅读并同意隐私规则');
					return false;
				}
				let _this = this;
				if (e.detail.errMsg == 'getPhoneNumber:fail') {
					_this.tui.toast('未获取到手机号码');
					return false;
				} else if (e.detail.iv == undefined || !e.detail.iv) {
					_this.tui.toast('授权失败');
					return false;
				} else {
					_this.tui.setWxAutophone(e.detail);
					_this.phoneiv = e.detail.iv;
					_this.mobile_encrypted_data = e.detail.encryptedData
					_this.autologin();
				}
			},
			treaty: function() {
				uni.navigateTo({
					url: '/pages/login/privacy'
				});
			},
			cancelogin:function(){
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			autologin() {
				let _this = this;
				let shareCode = _this.tui.getUserReferee();
				let datas = {
					code: _this.code,
					mobile_encrypted_data: _this.mobile_encrypted_data,
					encrypted_data: _this.encryptedData,
					mobile_iv: _this.phoneiv,
					referee: shareCode,
					iv: _this.iv,

				};
				let regs = _this.tui.request('login', 'post', datas, 1000, 1, '', 'weChatAuthLogin');
				Promise.resolve(regs).then((value) => {
					if (value.code == 200) {
						//this.tui.toast(value.message);
						_this.tui.setUserInfo(this.mobile, value.data.token, value.data.api_key);
						if(this.tui.getShopId()){
							uni.navigateTo({
								url: '/pageschild/shop/offlinePay?shop_id'+this.tui.getShopId()
							})
							return;
						}
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/my/my'
							})
						}, 1000)
					} else if (value.code == 40006) {
						this.isshareid = true;
						_this.tui.setWxAuto('');
					} else if (value.code == 40008) {
						_this.tui.setWxAuto('');
						_this.tui.setWxAutophone('');
						uni.navigateTo({
							url: '/pages/login/wxauthLogin'
						});
					} else {
						this.tui.toast(value.message);
					}
				})
			},

		}
	};
</script>

<style lang="scss" scoped>
	.container {
		.tui-page-title {
			width: 100%;
			font-size: 48rpx;
			font-weight: bold;
			color: $uni-text-color;
			line-height: 42rpx;
			padding: 110rpx 40rpx 40rpx 40rpx;
			box-sizing: border-box;
		}
        .yui_cancal{
			margin-top: 40rpx;
			background:#b6b6b3 !important;
		}
		.isshareid {
			display: block !important;
		}

		.disnone {
			display: none;
		}

		.codes {
			color: #f00
		}

		.autologin {
			background: #ff2c29;
			color: #fff;
			width: 90%;
			border-radius: 14rpx;
			font-size: 30rpx;
			height: 90rpx;
			line-height: 90rpx;
		}

		.autophone {
			background: #d08f1f;
			color: #fff;
			width: 90%;
			border-radius: 14rpx;
			font-size: 30rpx;
			height: 90rpx;
			line-height: 90rpx;
		}

		.logos {
			width: 15%;
			border-radius: 30rpx;
			margin: 26% auto;
			height: 40rpx;
			text-align: center;
			display: block;
		}

		.tui-form {
			padding-top: 50rpx;

			.tui-view-input {
				width: 100%;
				box-sizing: border-box;
				padding: 0 40rpx;

				.tui-cell-input {
					width: 100%;
					display: flex;
					align-items: center;
					padding-top: 48rpx;
					padding-bottom: $uni-spacing-col-base;

					input {
						flex: 1;
						padding-left: $uni-spacing-row-base;
					}

					.tui-icon-close {
						margin-left: auto;
					}

					.tui-btn-send {
						width: 156rpx;
						text-align: right;
						flex-shrink: 0;
						font-size: $uni-font-size-base;
						color: $uni-color-error;
						border-radius: 20rpx;


					}

					.tui-gray {
						color: $uni-text-color-placeholder;
					}
				}
			}

			.tui-cell-text {
				width: 100%;
				padding: 40rpx $uni-spacing-row-lg;
				box-sizing: border-box;
				font-size: $uni-font-size-sm;
				color: $uni-text-color-grey;
				display: flex;
				align-items: center;

				.tui-color-primary {
					color: $uni-color-pink;
					padding-left: $uni-spacing-row-sm;
				}
			}

			.tui-btn-box {
				width: 100%;
				padding: 0 $uni-spacing-row-lg;
				box-sizing: border-box;
				margin-top: 80rpx;
			}
		}
	}
	.tui-radio {
		margin-left: 30rpx;
		margin-bottom: -6rpx;
		transform: scale(0.8);
		transform-origin: 100% left;
		color:#9ca1a3;
		display: flex;
		justify-content: left;
		/* line-height: 40rpx; */
	}
	.tui-radio-notice{
		color:#ee401d;
	}
	
	.tui-radio-icon{
		width:60rpx;
		height: 60rpx;
	}
</style>
